import React from 'react'
import ReactDOM from 'react-dom'

// 1. 准备数据
const arr = [
  { id: 1, name: 'Vue' },
  { id: 2, name: 'React' },
  { id: 3, name: 'Angular' },
  { id: 4, name: 'xxx' },
]

// 2. 渲染数据
/* const el = (
  <ul>
    <li>{arr[0].name}</li>
    <li>{arr[1].name}</li>
    <li>{arr[2].name}</li>
  </ul>
) */

/* const arrTemp = [
  <li>{arr[0].name}</li>,
  <li>{arr[1].name}</li>,
  <li>{arr[2].name}</li>,
] */
// {} 里面可以放数组！
// JS 中的 map 方法可以返回数组，只要把返回的结果和上面保持一致，就可以完成效果啦
/* const arrTemp = arr.map((item) => <li key={item.id}>{item.name}</li>)
const el = <ul>{arrTemp}</ul> */

// key: 唯一
// 作用：性能优化
// 加在哪里？循环谁，加在谁上面
const el = (
  <ul>
    {arr.map((item) => (
      <li key={item.id}>
        {item.name}
        <span>xxx</span>
      </li>
    ))}
  </ul>
)

ReactDOM.render(el, document.querySelector('#root'))
